<template>
    <!--地图挂载dom-->
    <div id="map">
    </div>
</template>

<script>
    //引入依赖
    import {Map, View} from 'ol'
    import TileLayer from 'ol/layer/Tile'
    import {Stroke, Style} from "ol/style";
    import {Vector as VectorSource, OSM} from 'ol/source';
    import {Vector as VectorLayer} from 'ol/layer';
    import {GeoJSON, WFS} from 'ol/format';
    import {bbox} from 'ol/format/filter'

    export default {
        name: 'FilterBbox',
        props: {},
        mounted() {
            //加载矢量数据源
            const vectorSource = new VectorSource();
            const vectorLayer = new VectorLayer({
                source: vectorSource,
                style: new Style({
                    stroke: new Stroke({
                        color: 'rgba(0, 0, 255, 1.0)',
                        width: 2,
                    }),
                }),
            });

            const raster = new TileLayer({
                source: new OSM()//加载OpenStreetMap
            });

            this.map = new Map({
                layers: [raster, vectorLayer],
                target: 'map',
                view: new View({
                    center: [113.24981689453125, 23.126468438108688], //视图中心位置
                    projection: "EPSG:4326", //指定投影
                    zoom: 12   //缩放到的级别
                }),
            });
            //geojson字符串
            let geojson = {
                "type": "FeatureCollection",
                "features": [
                    {
                        "type": "Feature",
                        "properties": {},
                        "geometry": {
                            "type": "Polygon",
                            "coordinates": [
                                [
                                    [
                                        110.41259765625,
                                        21.616579336740603
                                    ],
                                    [
                                        117.39990234375,
                                        21.616579336740603
                                    ],
                                    [
                                        117.39990234375,
                                        24.647017162630366
                                    ],
                                    [
                                        110.41259765625,
                                        24.647017162630366
                                    ],
                                    [
                                        110.41259765625,
                                        21.616579336740603
                                    ]
                                ]
                            ]
                        }
                    }
                ]
            };
            //读取geojson的要素数据
            let geoJSON = new GeoJSON();
            let features = geoJSON.readFeatures(geojson);
            let vector = new VectorSource();
            let layer = new VectorLayer({
                source: vector
            });
            vector.addFeatures(features);
            this.map.addLayer(layer);
            // 生成获取要素的请求
            const featureRequest = new WFS().writeGetFeature({
                srsName: 'EPSG:4326',//坐标系
                featureNS: 'www.openlayers.com',// 注意这个值必须为创建工作区时的命名空间URI
                featurePrefix: 'openlayers',//工作区的名称
                featureTypes: ['province'],//所要访问的图层
                outputFormat: 'application/json',//数据输出格式
                geometryName: 'the_geom',//几何体的名称
                maxFeatures: 50,//最大请求数量
                //bbox的空间过滤，当前的这个范围和要素数据有相交的就返回，geometryName必须指定
                //bbox: [110.41259765625,  21.616579336740603,  117.39990234375, 24.647017162630366],
                filter: new bbox('the_geom', [110.41259765625,  21.616579336740603,  117.39990234375, 24.647017162630366], 'EPSG:4326')
            });

            // 发送post请求获取图层要素
            fetch('http://localhost:8080/geoserver/wfs', {
                method: 'POST',
                body: new XMLSerializer().serializeToString(featureRequest),//前端构建的xml使用xml的序列化器，发送请求
            }).then((response) => {
                //将响应的数据转成json
                return response.json();
            }).then((json) => {
                console.log(json)
                //将响应的数据转成geojson之后读取要素数据，
                const features = new GeoJSON().readFeatures(json);
                vectorSource.addFeatures(features);
                //将视图适配到当前返回的数据源的范围
                this.map.getView().fit(vectorSource.getExtent());
            });

        },
        methods: {}
    }
</script>

<style scoped>
    #map {
        width: 100%;
        height: 100%;
    }
</style>
